<template>
  <div class="device">
    <DeviceTypeList
      v-model="currentType"
      :device-type-list="dict['device_type']"
    />
    <div class="device-right">
      <Tabs @change="handleChangeTab" :currentKey="currentComponentKey" />
      <div class="device-right-bottom">
        <KeepAlive>
          <component
            :is="currentComponent"
            :device-type-list="dict['device_type']"
            :current-type="currentType"
            :park-list="parkList"
            @goto-list="handleGotoList"
          ></component>
        </KeepAlive>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, shallowRef } from 'vue'

import { parkPageList } from '@/api/manager/dataManage/park'
import DeviceTypeList from '@/components/deviceTypeList/index.vue'
import { useDict } from '@/hooks/useDict'
import Tabs from './components/tabs.vue'
import Device from './device.vue'
import Alarm from './alarm.vue'

defineOptions({
  name: 'DeviceManage',
})

const { dict } = useDict(['device_type'])

const componentConfig = {
  device: Device,
  alarm: Alarm,
}

const parkList = ref([])

/**
 * 当前设备类型
 */
const currentType = ref('')

const currentParkId = ref('')

const currentComponentKey = ref('')

const currentComponent = shallowRef(null)

const handleChangeTab = (val) => {
  currentComponentKey.value = val
  currentComponent.value = componentConfig[currentComponentKey.value]
}

const handleGotoList = (tab, type) => {
  handleChangeTab(tab)
  currentType.value = type
}

const handleChangePark = (val) => {
  currentParkId.value = val
}

/**
 * 获取园区列表
 */
const fetchParkList = () => {
  parkPageList({
    pageIndex: 1,
    pageSize: 9999,
    enable: '1',
  }).then((res) => {
    parkList.value = res.data.list
  })
}

onMounted(() => {
  handleChangeTab('device')

  fetchParkList()
})
</script>
<style lang="scss" scoped>
.device {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;

  &-right {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    &-bottom {
      width: 100%;
      // height: calc(100% - 50px);
      flex: 1;
      margin-top: 20px;
      overflow-y: hidden;

      :deep(.custom-table-list-wrapper) {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow-y: hidden;

        .search {
          width: 100%;
          display: flex;
          align-items: flex-start;
          justify-content: space-between;
          flex-shrink: 0;
          background: #ffffff;
          box-shadow: 0px 0px 10px 0px rgba(72, 121, 238, 0.1);
          border-radius: 4px;
          box-sizing: border-box;
          padding: 20px 30px 0px 30px;
          height: 70px;
          overflow-y: hidden;
          margin-bottom: 20px;
          &.active {
            height: auto;
          }
          &-left {
            display: flex;
            flex: 1;
            flex-wrap: nowrap;
            align-items: center;
            justify-content: flex-start;
            position: relative;
            box-sizing: border-box;
            .el-form {
              flex: 1;
            }
            &-toggle {
              color: #4677ee;
              font-size: 14px;
              align-self: flex-start;
              margin-right: 20px;
              margin-top: 10px;
              cursor: pointer;
              .svg-icon {
                color: #4677ee;
                width: 10px;
                height: 10px;
              }
            }
          }
          &-right {
            display: flex;
            align-items: center;
            justify-content: flex-end;
          }
          &-select {
            min-width: 180px;
            width: 100%;
          }
          &-input {
            min-width: 240px;
            width: 100%;
          }
        }
        .search1 {
          border-radius: 0 0 4px 4px;
        }

        .content {
          width: 100%;
          flex: 1;
          background-color: #ffffff;
          box-sizing: border-box;
          padding: 20px 30px;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          &-operate {
            display: flex;
            align-items: center;
            justify-content: space-between;
            .el-button {
              margin-bottom: 20px;
            }
          }
          &-table {
            width: 100%;
            flex: 1;
            overflow: hidden;
            position: relative;
          }
          &-page {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            flex-shrink: 0;
            margin-top: 20px;
          }
        }
      }
    }
  }
}
</style>
